<script setup>
import UserSettingsNav from "./Settings/UserSettingNav.vue";
</script>

<template>
  <div class="us">
    <h2>User Settings</h2>
    <UserSettingsNav />

    <!-- 为什么要添加这两个 Class呢？ -->
    <router-view class="us__content" />
    <router-view name="helper" class="us__content us__content--helper" />
  </div>
</template>

<style>
.us {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header"
    "nav content"
    "nav helper";
}

.us__content {
  grid-area: content;
}

.us__content--helper {
  grid-area: helper;
}
</style>
